<template>
  <div>
    <!-- 筛选、搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="模糊搜索">
          <el-input
            v-model="formInline.query_str"
            placeholder="请输入"
            clearable
          />
        </el-form-item> -->
      <el-form-item label="专家组">
        <el-select
          v-model="formInline.project_group"
          placeholder="专家组"
          clearable
        >
          <el-option
            v-for="item in projectGroups"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCurrentChange(1)"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="dialogFormVisible = true"
          >打批次标签</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <div v-if="tableData.length > 0">
    <el-table
      ref="multipleTableRef"
      v-loading="tabLoading"
      :data="tableData"
      border
      style="width: 100%"
      height="500"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="project_code" label="项目编码" width="160" />
      <el-table-column prop="project_name" label="项目名称" width="150" />
      <el-table-column prop="project_class" label="项目类别" width="100" />
      <el-table-column prop="project_type" label="项目规模" width="100" />
      <el-table-column prop="project_group" label="专家组" width="120" />
      <el-table-column
        prop="project_batch.batch_name"
        label="项目批次"
        width="180"
      />
      <el-table-column prop="statu" label="项目状态" width="120" />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        :formatter="tableDateFormatter"
      />
      <el-table-column prop="project_owner.fullname" label="项目负责人" width="100" />
      <el-table-column prop="project_owner.department" label="项目负责人部门" width="130" />
      <el-table-column prop="project_owner.phone" label="项目负责人电话" width="130" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="handleDetail(scope.$index)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block items-center justify-center">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="cnt"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <div v-if="tableData.length == 0">
    <el-empty description="无记录" />
  </div>

  <form-drawer
    ref="formDrawerRef"
    title="项目详情"
    destroyOnClose
    :showButton="false"
  >
    <el-descriptions
      title="项目基础信息"
      direction="vertical"
      :column="4"
      :size="size"
      border
    >
      <el-descriptions-item label="项目编码">{{
        detailProject.value.project_code
      }}</el-descriptions-item>
      <el-descriptions-item label="项目名称">{{
        detailProject.value.project_name
      }}</el-descriptions-item>
      <el-descriptions-item label="项目类别">{{
        detailProject.value.project_class
      }}</el-descriptions-item>
      <el-descriptions-item label="项目规模">
        {{ detailProject.value.project_type }}
      </el-descriptions-item>
      <el-descriptions-item label="项目专家组"
        >{{ detailProject.value.project_group }}
      </el-descriptions-item>
      <el-descriptions-item label="项目提交时间"
        >{{ formatDate(detailProject.value.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="项目所在批次"
        >{{ detailProject.value.project_batch == null?detailProject.value.project_batch:detailProject.value.project_batch.batch_name }}
      </el-descriptions-item>
      <el-descriptions-item label="项目状态"
        >{{ detailProject.value.statu }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      :title="'项目成员' + (index + 1)"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      border
      v-for="(item, index) in detailProject.value.project_member"
      class="mt-2"
    >
      <el-descriptions-item label="成员名">{{
        item.user_fullname
      }}</el-descriptions-item>
      <el-descriptions-item label="成员所在部门">{{
        item.user_department
      }}</el-descriptions-item>
      <el-descriptions-item label="成员贡献占比" :span="2">{{
        item.menbers_percentage
      }}</el-descriptions-item>
      <el-descriptions-item label="成员主要负责项目内容">
        {{ item.members_job }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="项目文件"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      border
      class="mt-2"
    >
      <el-descriptions-item label="文件列表(点击下载)">
        <el-link
          class="ml-5"
          type="success"
          v-for="item in detailProject.value.project_file"
          v-if="detailProject.value.project_file.length > 0"
          :href="'/api/v1/download_file/' + item.id"
          @click="handleFileTag(item.id)"
          >{{ item.file_path }}</el-link
        >
        <span v-else>无</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="项目描述"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      class="mt-2"
      border
    >
      <el-descriptions-item>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="项目简介" name="1">
            <div>
              {{ detailProject.value.project_brief }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="项目背景" name="2">
            <div>
              {{ detailProject.value.project_background }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="项目创新点" name="3">
            <div>
              {{ detailProject.value.project_annotation }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="项目应用/推广价值" name="4">
            <div>
              {{ detailProject.value.project_effect }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="项目操作记录"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      border
      class="mt-2"
    >
      <el-descriptions-item label="记录">
        <el-timeline class="mt-2">
          <el-timeline-item
            v-for="(item, index) in detailProject.value.project_log"
            :key="index"
            type="primary"
            size="large"
            hollow="true"
            :timestamp="formatDate(item.createTime)"
          >
            {{ item.statu }}
          </el-timeline-item>
        </el-timeline>
      </el-descriptions-item>
    </el-descriptions>
  </form-drawer>

  <el-dialog v-model="dialogFormVisible" title="打批次标签">
    <el-form :model="batchForm">
      <el-form-item label="所属专家组" label-width="140px">
        <el-input v-model="formInline.project_group" disabled />
      </el-form-item>
      <el-form-item label="批次名称" label-width="140px">
        <el-select v-model="batchForm.batch_name" class="m-2">
          <el-option
            v-for="item in batches"
            :key="item.batch_name"
            :label="item.batch_name"
            :value="item.batch_name"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleBatchTag"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, onUpdated, reactive, ref } from "vue";

import {
  getProjectsByUser,
  getUserGroups,
  download_file,
  getTaggingProjects,
  tag_batch,
  getBatches,
} from "@/api/apiv1";
import { formatDate, message } from "@/composables/util";

import FormDrawer from "@/components/FormDrawer.vue";

const dialogFormVisible = ref(false);
const batches = ref([]);
const batchForm = reactive({
  batch_name: "",
});
const tabLoading = ref(false);
const tableData = ref([]);
const cnt = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const formDrawerRef = ref(null);
const detailProject = reactive({});

const projectGroups = ref([]);

const projectLogs = ref([]);

const formInline = reactive({
  project_group: "",
});

const multipleSelection = ref([]);

const handleSelectionChange = (v) => {
  multipleSelection.value = v;
};

// 打标签
const handleBatchTag = () => {
  let ids = [];
  for (var index in multipleSelection.value) {
    ids.push(multipleSelection.value[index].id);
  }

  console.log(ids);
  console.log(formInline.project_group);

  tag_batch(batchForm.batch_name,formInline.project_group,ids).then(res => {
    if(res.code != 200){
      message(res.msg,"error")
    } else {
      message("打标签成功")
      dialogFormVisible.value = false
      getData()
    }
  })

};

const tableDateFormatter = (row, column) => {
  return formatDate(row.createTime);
};

const init = () => {
  getUserGroups().then((res) => {
    projectGroups.value = res.data;
    formInline.project_group = projectGroups.value[0];
    getBatches(formInline.project_group).then((res) => {
      batches.value = res.data.records;
      batchForm.batch_name = batches.value[0].batch_name;
    });
  });
};

const getData = () => {
  tabLoading.value = true;
  getTaggingProjects(
    pageSize.value,
    currentPage.value,
    formInline.project_group
  ).then((res) => {
    cnt.value = res.data.cnt;
    tableData.value = res.data.records;
    tabLoading.value = false;
  });
};

onMounted(() => {
  init();
});

const handleSizeChange = (v) => {
  pageSize.value = v;
  getData();
};
const handleCurrentChange = (v) => {
  currentPage.value = v;
  getData();
};

const handleDetail = (index) => {
  console.log(index);
  detailProject.value = tableData.value[index];
  console.log(detailProject.value);
  formDrawerRef.value.open();
};

const handleFileTag = (id) => {
  download_file(id);
};
</script>
